<template>
  <view class="purchanse-complete">
    <view class="c-tips">
      <view class="t-title">等待发货</view>
      <view class="t-text">已兑换，等待商家发货。</view>
      <view class="t-btn" @tap="nav(`/subpackage/goods/pages/detail/index?id=${getObjVal(orderFormInfo,'_raw.orderFormGoodsItemsList[0].id')}`)">再来一单</view>
    </view>
    <view class="c-content">
      <view class="c-title">内衣产品</view>
      <view class="c-goods-info">
        <image class="i_left" />
        <view class="i_right">
          <view>dsadas撒大声大所多大萨达阿萨德大萨达阿诗丹顿</view>
          <view>
            <text>jdasidas</text>
            <text>x3</text>
          </view>
          <view>规格：黑色/70A</view>
        </view>
      </view>
      <view class="c-item">
        <view class="c-item_left">订单编号</view>
        <view class="c-item_right">{{getObjVal(orderFormInfo,'sn')}}</view>
      </view>
      <view class="c-item">
        <view class="c-item_left">订单金额</view>
        <view class="c-item_right" style="color:#FF0000">￥248</view>
      </view>
      <view class="c-item">
        <view class="c-item_left">礼品卡号</view>
       <view class="c-item_right">{{ ljfIntegralCardNumberList }}</view>
      </view>
      <view class="c-item">
        <view class="c-item_left">创建时间</view>
        <view class="c-item_right">{{ getObjVal(orderFormInfo,'createTime') }}</view>
      </view>
      <view class="c-item">
        <view class="c-item_left">兑换时间</view>
        <view class="c-item_right">EXDH21321312312312231</view>
      </view>
      <view class="c-item">
        <view class="c-item_left">发货时间</view>
        <view class="c-item_right">{{ getObjVal(orderFormInfo,'_raw.logisticsForm.createTime') }}</view>
      </view>
      <view class="c-item">
        <view class="c-item_left">收货地址</view>
        <view class="c-item_right">{{ getObjVal(orderFormInfo,'recipientAddress') }}/{{ getObjVal(orderFormInfo,'recipient') }}/{{ getObjVal(orderFormInfo,'recipientMobile') }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props:{
    orderFormInfo:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  },
  data () {
    return {}
  },
  computed:{
    ljfIntegralCardNumberList() {
      const l = this.getObjVal(this.orderFormInfo,'_raw.orderFormLjfIntegralCardList',[]);
      if(l.length) {
        return l.map(e => e.ljfIntegralCard.code).join('、');
      }
      return '--';
    }
  },
  created () { },
  mounted () { },
  methods: {
  }
}
</script>
<style lang="less" scoped>
.purchanse-complete {
  .layout_flex(@d:column);
  .c-tips {
    .layout_flex(@d:column);
    width: 690rpx;
    padding: 30rpx 0;
    margin: 30rpx 0;
    background: #fff;
    border-radius: 10rpx;
    .t-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
    .t-text {
      margin: 20rpx 0;
      font-size: 30rpx;
      font-weight: 500;
      color: #666;
    }
    .t-btn {
      width: 180rpx;
      height: 60rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #fff;
      text-align: center;
      line-height: 60rpx;
      background: linear-gradient(90deg, #ff5618, #ff3730);
      border-radius: 30rpx;
    }
  }
  .c-content {
    width: 650rpx;
    padding: 30rpx 20rpx;
    margin-bottom: 100rpx;
    background: #fff;
    border-radius: 10rpx;
    .c-title {
      font-size: 34rpx;
      font-weight: 500;
      color: #000;
    }
    .c-goods-info {
      .layout_flex();
      padding: 20rpx 0;
      .i_left {
        width: 120rpx;
        height: 120rpx;
        margin-right: 20rpx;
        background: #f8c301;
        border-radius: 10rpx;
      }
      .i_right {
        view {
          &:nth-child(1) {
            width: 480rpx;
            font-size: 28rpx;
            font-weight: 500;
            color: #333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          &:nth-child(2) {
            .layout_flex(@j:space-between);
            margin: 10rpx 0;
            font-size: 24rpx;
            font-weight: 500;
            color: #999;
          }
          &:nth-child(3) {
            .layout_flex(@j:space-between);
            font-size: 20rpx;
            font-weight: 500;
            color: #666;
          }
        }
      }
    }
    .c-item {
      .layout_flex(@a:start,@j:space-between);
      padding: 30rpx 0;
      &_left {
        font-size: 30rpx;
        font-weight: 500;
        color: #666;
      }
      &_right {
        width: 450rpx;
        text-align: right;
        word-break: break-all;
      }
    }
  }
}
</style>
